<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";
import {
	CloseOutlined
} from '@ant-design/icons-vue';
const props=defineProps(["isShow"])
const emits=defineEmits(["close"])
const isShow=ref(true)
watchEffect(()=>{
	console.log("props.isShow:",props.isShow);
	isShow.value=!!props.isShow
})
function close(e){
	isShow.value=false
	emits("close",false)
}
</script>


<template>
<div class="window" v-show="isShow">
	<div class="title">
		<div class="titleText">标题</div>
		<div class="close" @mouseup="close"><close-outlined /></div>
	</div>
	<div class="body">
		<slot></slot>
	</div>
</div>

</template>


<style scoped>
.window{
	z-index: 1111;
	max-width: 20rem;
	min-width: 10rem;
	position: fixed;
	top: 20%;
	left: 50%;
	background-color: #fff;    
	border: 1px solid rgb(0 0 0 / 21%);
    box-shadow: 1px 1px 5px 2px #00000030;
    transform: translate(-50%,0%);
}
.body{
	max-height: 16em;
	overflow: auto;
}
.body::-webkit-scrollbar{/*整个滚动条  https://m.php.cn/article/480425.html*/
    width: 0;
}
.title{
	font-size: 12px;
	font-weight: bold;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0 4px;
	border-bottom: 1px solid rgb(0 0 0 / 21%);
}
.titleText{
}
.close{
	width: 2em;
	height: 2em;
	text-align: center;
	line-height: 2em;
}
.close:hover{
	background-color: red;
	color: #fff;
}
.close:active{
	background-color: rgb(248, 81, 81);
	color: #fff;
	width: 2em;
	height: 2em;
}

</style>